<template>
  <div class="stu" style="position: relative;">
		<topimg></topimg>
	    <toptab :datext='datext' :shows='false'></toptab>
	    <div style="width: 1100px;height:830px;margin: 0 auto;">
			<!-- <div class="ptitle"><a>|</a><p>智能家居系列</p></div> -->
			<!-- <div class="box1">
				<div class="box1c" v-for="(i,index) in data1" @click="cpzxxq">
					<div style="width:100%;height:258px;overflow:hidden;position:relative;">
						<img :src="i.src" alt="">
						<div class="pro">
							<div><p>+</p></div>
						</div>
					</div>
					<div class="pbox">{{i.text}}</div>
				</div>
			</div> -->
			
			<div class="ptitle" ><a>|</a><p>{{$store.state.cptitle[$store.state.index]}}</p></div>
			<div class="box1" style="border:none;">
				<div class="box1c" v-for="(i,index) in $store.state.cpbox[$store.state.index]" @click="cpzxxq(index)">
					<div style="width:100%;height:258px;overflow:hidden;position:relative;">
						<img :src="i.url1" alt="">
						<div class="pro">
							<div><p>+</p></div>
						</div>
					</div>
					<div class="pbox">{{i.title}}</div>
				</div>
			</div>
			
		</div>
  </div>
</template>

<script>
import topimg from '@/components/topimg.vue'
import toptab from '@/components/toptab.vue'
import $ from 'jquery'
export default {
  name: 'stu',
  components: {topimg,toptab},//声明子组件
  computed:{},
  data(){
	  return {
		  datext:{
			      type:String,
		  		  tetx1:'- 产品中心',
		  		  text2:'产品包含：非标自动化设备、立体库、机械配件、智慧物联产品、wms控制系统等等'
		  },
		  // data1:[
		  // 			  {src:'../../../img/cpzx/qysAGV.png',text:'牵引式AGV'},
		  // 			  {src:'../../../img/cpzx/bfsAGV.png',text:'背负式AGV'},
		  // 			  {src:'../../../img/cpzx/jssAGV.png',text:'举升式AGV'},
		  // 			  {src:'../../../img/cpzx/gtsAGV.png',text:'滚筒式AGV'},
		  // 			  {src:'../../../img/cpzx/ccsAGV.png',text:'叉车式AGV'},
		  // 			  {src:'../../../img/cpzx/duibi.png',text:'AGV技术小车与人工对比'}
		  // ]
		  num:0,
	  }
  },
  methods:{
	 cpzxxq(index){
	 		this.$router.push({path:'/cpzxxq',query:{'num':index, 'index':this.$route.query.index}});
	 }
  },
  mounted(){
      this.$store.state.indexof = 2;
  }
}
</script>
<style scoped="scoped">
	.box1c:hover .pbox{
		color: white;
		transition:0.4s;
		background-color: rgba(81, 45, 167,1);
		text-align: center;
		padding-left: 18px;
	}
	.box1c:hover .pro div{
		transform: rotate(360deg); /* 旋转动画 */
	}
	.box1c:hover .pro{
		opacity: 1;
		transform: scale(0.9); /* 缩放动画 */
	}
	.pro div{
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: 2px solid rgba(81, 45, 167,1);
		text-align: center;
		line-height: 40px;
		font-size: 30px;
		color: rgba(81, 45, 167,1);
		position: absolute;
		top: 105px;
		left: 105px;
		transition:0.4s;
	}
	.pro{
		width:258px;
		height: 258px;
		background:rgba(255,255,255,0.4);
		position: absolute;
		left: 0px;
		top: 0px;
		border: 2px solid rgba(81, 45, 167,1);
		opacity: 0;
		transition:0.4s;
	}
	.pbox{
		width:258px;
		height: 50px;
		padding: 13px 12px 10px;
		text-align: left;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size: 16px;
		color: #333333;
		transition:0.3s;
		background-color: white;
	}
	.box1c img{
		height:100%;
		width:313px;
		
	}
	.box1c{
		width: 258px;
		height: 308px;
		
	}
	.box1{
		width:100%;height:676px;border-bottom: 1px solid #DEDEDE;
		display:grid;
		grid-template-columns: repeat(4, 1fr); /* 相当于 1fr 1fr 1fr */
		grid-template-rows: repeat(2, 1fr); /* fr单位可以将容器分为几等份 */
		grid-gap:2.1%; /* grid-column-gap 和 grid-row-gap的简写 */
		grid-auto-flow: row;
	}
	.ptitle p{
		font-size: 18px;
		color: #333333;
		float:left;
		margin-left: 7px;
	}
	.ptitle a{
		font-size: 18px;
		color: #512da7;
		float:left;
	}
	.ptitle{
		width:100%;
		height:77px;
		padding: 30px 0 20px;
		text-align: left;
	}
</style>
